<template>
    <div class="share_content">
        <!-- 是否正在加载 -->
        <nut-overlay v-model:visible="isShow" :lock-scroll="false" @click="isShow = false"
            :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.1)' }">
            <div class="loading-main" v-show="isShow">
                <div class="loading-content">
                    <div class="loading-wrap">
                        <div class="loading-animation"></div>
                        <p class="loading_text">{{ t('inside_page_game_list_loading') }}...</p>
                    </div>
                </div>
            </div>
        </nut-overlay>
        <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const toast_value = ref()
const showToast = ref(false)
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
})
const emit = defineEmits(['update:visible', 'close']);
const isShow = computed({
    get: function () {
        return props.visible;
    },
    set: function (value) {
        emit('update:visible', value);
    },
});
</script>

<style lang='scss' scoped>
@import '/imgs/gka/loading/loading.css';

.loading-main {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #271643;
}
.loading_text {
    text-align: center;
    font-weight: 400;
    margin-top: 20px;
    font-size: 44px;
}

.loading-content {
    width: 100vw;
    height: 100vw;
    transform: scale(0.3);
    transform-origin: center center;
    .tab_style {
        transform: scale(0.75);
        transform-origin: center center;
    }
}

:deep(.nut-popup) {
    background: unset;
}
</style>